import { memo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { AnotherLoginListWrapper, AnotherLoginWrapper } from './style';
import loginbg from '@/assets/img/phone-login.png';
import { message } from 'antd';

interface IProps {
  children?: ReactNode;
  setStatus: (val: string) => void;
  setOpen: () => void;
}

const AnotherLogin: FC<IProps> = (props) => {
  const { setStatus } = props;
  const [isAgreement, setIsAgreement] = useState(false);
  function handleClick(val: string) {
    if (!isAgreement) {
      message.error('请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》');
      return;
    }
    setStatus(val);
  }

  return (
    <AnotherLoginWrapper>
      <div className="select">
        <div className="phone">
          <img src={loginbg} />
          <a
            className="sprite_button"
            onClick={() => {
              handleClick('captcha');
            }}
          >
            <div className="sprite_button">手机号登录/注册</div>
          </a>
        </div>
        <AnotherLoginListWrapper>
          <ul>
            <li>
              <a className="link">
                <i className="theme-logo logo" style={{ backgroundPosition: '-150px -670px' }}></i>
                微信登录
              </a>
            </li>
            <li>
              <a className="link">
                <i className="theme-logo logo" style={{ backgroundPosition: '-190px -670px' }}></i>
                QQ登录
              </a>
            </li>
            <li>
              <a className="link">
                <i className="theme-logo logo" style={{ backgroundPosition: '-231px -670px' }}></i>
                微博登录
              </a>
            </li>
            <li>
              <a
                className="link"
                onClick={() => {
                  handleClick('email');
                }}
              >
                <i className="theme-logo logo" style={{ backgroundPosition: '-271px -670px' }}></i>
                网易邮箱登录
              </a>
            </li>
          </ul>
        </AnotherLoginListWrapper>
      </div>
      <div className="consent">
        <input type="checkbox" checked={isAgreement} onChange={(e) => setIsAgreement(e.target.checked)} />
        <label>同意</label>
        <a href="javascript:void(0)">《服务条款》</a>
        <a href="javascript:void(0)">《隐私政策》</a>
        <a href="javascript:void(0)">《儿童隐私政策》</a>
      </div>
    </AnotherLoginWrapper>
  );
};

export default memo(AnotherLogin);
